<template>
  <div id="orderDetail">
    <!--导航栏-->
    <van-nav-bar
        title="我的订单"
        left-arrow
        :fixed=true
        :border=true
        @click-left="$router.go(-1)"
    ></van-nav-bar>

    <van-tabs
        v-model="activeName"
        style="margin-top: 2.6rem"
        title-active-color="#75a342"
        color="#75a342"
        :before-change="beforeChange"
        sticky
    >
      <van-tab title="全部" name="a" >
          <MineOrderItem v-for="(order) in allOrderArr" :order="order" :key="order.orderId"/>
      </van-tab>
      <van-tab title="待支付" name="b" >
          <MineOrderItem v-for="(order) in allWillOrderArr" :order="order" :key="order.orderId"/>
      </van-tab>
      <van-tab title="待收货" name="c" >
          <MineOrderItem v-for="(order) in allPayOrderArr" :order="order" :key="order.orderId"/>
      </van-tab>
      <van-tab title="待评价" name="d" >
        <MineOrderItem v-for="(order) in allAcceptOrderArr" :order="order" :key="order.orderId"/>
      </van-tab>
      <van-tab title="售后/退款" name="e" >
        <MineOrderItem v-for="(order) in allCancelOrderArr" :order="order" :key="order.orderId"/>
          <MineOrderItem v-for="(order) in allRefundOrderArr" :order="order" :key="order.orderId"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import MineOrderItem from './components/MineOrderItem'
import {getAllOrder} from "@/api/api";
import {Toast} from "vant";

export default {
  name: "MineOrder",
  data() {
    return {
      activeName: 'a',
      allOrderArr: null, // 所有的订单
      allWillOrderArr: null, // 所有待支付的订单
      allPayOrderArr: null, // 所有支付的订单
      allAcceptOrderArr:null,// 所有收货的订单
      allCancelOrderArr:null,// 所有取消的订单
        allRefundOrderArr:null,// 所有取消的订单
    };
  },
  components: {
    MineOrderItem
  },
  // eslint-disable-next-line vue/no-dupe-keys
  methods: {
    beforeChange(index) {
      // 返回 false 表示阻止此次切换
      if (index === 1) {
        return false;
      }

      // 返回 Promise 来执行异步逻辑
      return new Promise((resolve) => {
        // 在 resolve 函数中返回 true 或 false

        if (index === 'a'){
          getAllOrder(-1).then((resp) => {
            if (resp.data.code === 2000) {
              this.allOrderArr = resp.data.data.order;
            } else {
              Toast({
                message: '订单获取失败',
                duration: 600
              });
            }
          })
        }else if (index === 'b'){
          getAllOrder( 2).then((resp) => {
            if (resp.data.code === 2000) {
              this.allWillOrderArr = resp.data.data.order;
            } else {
              Toast({
                message: '订单获取失败',
                duration: 600
              });
            }
          })
        }else if (index === 'c'){
          getAllOrder(3).then((resp) => {
            if (resp.data.code === 2000) {
              this.allPayOrderArr = resp.data.data.order;
            } else {
              Toast({
                message: '订单获取失败',
                duration: 600
              });
            }
          })
        }else if(index === 'd'){
          getAllOrder(5).then((resp) => {
            if (resp.data.code === 2000) {
              this.allAcceptOrderArr = resp.data.data.order;
            } else {
              Toast({
                message: '订单获取失败',
                duration: 600
              });
            }
          })
        }else if(index === 'e'){
          getAllOrder(8).then((resp) => {
              if (resp.data.code === 2000) {
              for (let i = 0; i <resp.data.data.order.length ; i++) {
                  this.allCancelOrderArr=resp.data.data.order;
              }
            } else {
              Toast({
                message: '订单获取失败',
                duration: 600
              });
            }
          }),
              getAllOrder(7).then((resp) => {
                  if (resp.data.code === 2000) {
                      for (let i = 0; i <resp.data.data.order.length ; i++) {
                          this.allRefundOrderArr=resp.data.data.order;
                      }
                  } else {
                      Toast({
                          message: '订单获取失败',
                          duration: 600
                      });
                  }
              })
        }
        resolve(index !== 3);
      });
    },




  },
  mounted() {
    // 获取订单数据
    getAllOrder( -1).then((resp) => {
      if (resp.data.code === 2000) {
        this.allOrderArr = resp.data.data.order;
      } else {
        Toast({
          message: '订单获取失败',
          duration: 600
        });
      }
    })
  }
}
</script>

<style scoped>
#orderDetail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-bottom: 150px;
  height: 100%;
  background-color:white;
  z-index: 200;
  overflow:scroll;
}
</style>
